<template>
  <div class="network_settings">
    <div class="title">
      <span class="text">{{ $t('login.netcfg') }}</span>
      <span class="close-icon" @click.stop="clickCancel">
        <svg-icon icon-class="close" />
      </span>
    </div>
    <div class="list">
      <div class="net-table">
        <!-- 表格头部 -->
        <div class="table-header">
          <div class="td td-name">{{ $t('login.node') }}</div>
          <!-- <div class="td td-state">服务</div> -->
          <div class="td td-op">{{ $t('login.sel') }}</div>
        </div>
        <!-- 表格主体，线路列表 -->
        <div class="table-body">
          <div class="item" v-for="(item) in list" :key="item.id + 'op'">
            <div class="td td-name">
              <span v-if="item.id === 'jy1'">{{ $t('menu.jy1') }}</span>
              <span v-if="item.id === 'jy2'">{{ $t('menu.jy2') }}</span>
              <span v-if="item.id === 'jy3'">{{ $t('menu.jy3') }}</span>
            </div>
            <!-- <div class="td td-state" v-text="item.state"></div> -->
            <div class="td td-op" @click="changeNetWork(item)">
              <svg-icon icon-class="check" v-if="item.selected" />
            </div>
          </div>
        </div>
      </div>
      <div class="analog-firm">
        <el-switch style="display: block" v-model="isAnalog" active-color="#13ce66"
          inactive-color="#409EFF"></el-switch>
        <span class="analog-text">{{ isAnalog ? $t('menu.analog') : $t('menu.firm') }}</span>
      </div>
    </div>
    <div class="footer">
      <div class="confirm-btn btn-sure" @click.stop="clickSure">
        <span>{{ $t('login.confirm') }}</span>
      </div>
      <div class="confirm-btn btn-cancel" @click.stop="clickCancel">
        <span>{{ $t('tip.cancel') }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { checkTUrl } from '../../utils/auth'
export default {
  name: "Network",
  data() {
    return {
      list: [],
      selectUrl: "",
      isAnalog: true // true模拟盘 false实盘
    };
  },
  beforeMount() {
    // 获取本地线路数据
    let nodeList = this.$db
      .read()
      .get("trades.lineNode")
      .value();

    // 获取用户当前选中的盘
    let diskType = this.$db
      .read()
      .get("trades.diskType")
      .value();
    // console.log("初始化net", diskType);

    // 初始化交易地址
    for (const item of nodeList) {
      if (item.selected) {
        this.selectUrl = item.node;
        break;
      }
    }

    // 初始化交易列表
    this.list = nodeList.map(v => {
      return { ...v, node: checkTUrl(v.node, window.tradeUrl) }
    });

    // 初始化实盘模拟盘选中
    if (diskType == "1") {
      this.isAnalog = false;
    }
    else {
      this.isAnalog = true;
    }
  },
  methods: {
    changeNetWork(nowItem) {
      let nodeUrl = "";
      let changeList = this.list.map(item => {
        item.selected = false;
        if (item.id === nowItem.id) {
          item.selected = true;
          nodeUrl = item.node;
        }
        return item;
      });

      // 更新组件中的选中
      this.selectUrl = nodeUrl;
      this.list = changeList;
    },
    clickCancel() {
      this.$emit("clickclose");
    },
    clickSure() {
      this.$db
        .read()
        .set("trades.diskType", this.isAnalog ? '2' : '1')
        .write();
      // 存入store中的拼接交易地址
      this.$store.dispatch("user/updateTradeUrl", this.selectUrl + '9001');
      // 写入数据库中交易地址数据变化
      this.$db
        .read()
        .set("trades.lineNode", this.list)
        .write();
      // 关闭当前弹出
      this.$emit("clickclose");
    }
  }
};
</script>

<style lang="scss">
.network_settings {
  .list {
    .analog-firm {}
  }
}
</style>



<style lang="scss" scoped>
.network_settings {
  -webkit-app-region: no-drag;
  width: 422px;
  height: 334px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9;
  border: 1px solid #1883d7;
  background: #f0f0f0;
  transform: translate(-50%, -50%);

  .title {
    position: relative;
    height: 26px;
    line-height: 26px;
    padding-left: 4px;
    padding-right: 80px;
    background: #fff;
    text-indent: 6px;

    .text {
      font-size: 14px;
    }

    .close-icon {
      font-size: 16px;
      cursor: pointer;
      position: absolute;
      top: 0;
      right: 0px;
      padding-left: 3px;
      padding-right: 5px;

      &:hover {
        color: #ffffff;
        background-color: rgb(255, 0, 0);
      }
    }
  }

  .list {
    margin: 10px;
    min-height: 230px;
    background: #fff;
    overflow-y: auto;

    .net-table {
      border: 1px solid #000;

      .td {
        font-size: 13px;
        position: relative;
        width: 180px;
        padding: 0 5px;
        line-height: 30px;
        border-right: 1px solid #cecece;
      }

      .table-header {
        display: flex;
        position: relative;
        width: 100%;
        line-height: 26px;
        border-bottom: 1px solid #000;

        .td {
          border-bottom: 0;
          border-color: #000;
        }

        .td-name {
          width: 180px;
        }

        .td-op {
          flex: 1;
          border-right: 0;
        }
      }

      .table-body {
        width: 100%;
        height: 140px;
        overflow-y: auto;

        .item {
          display: flex;
          height: 31px;
          border-bottom: 1px solid #cecece;

          .td-name {
            width: 180px;
          }

          .td-op {
            flex: 1;
            text-indent: 16px;
            border-right: 0;
            cursor: pointer;

            .svg-icon {
              font-size: 17px;
            }
          }
        }
      }
    }

    .analog-firm {
      display: flex;
      padding: 14px 0 0 8px;

      .analog-text {
        margin-left: 6px;
        line-height: 2;
      }
    }
  }

  .footer {
    padding: 12px 20px;
    background: #f0f0f0;
    text-align: right;

    .confirm-btn {
      position: relative;
      display: inline-block;
      width: 88px;
      height: 28px;
      line-height: 24px;
      background: #f0f0f0;
      border: #0078d7 2px solid;
      text-align: center;
      cursor: pointer;

      span {
        position: relative;
      }

      &.btn-cancel {
        border-color: #cecece;
        line-height: 26px;
        border-width: 1px;

        &::before {
          border: 1px solid #0078d7;
        }
      }

      &::before {
        position: absolute;
        content: "";
        left: -1px;
        top: -1px;
        bottom: -1px;
        right: -1px;
        background-color: #e5f1fb;
        transition: opacity 0.5s;
        opacity: 0;
      }

      &:hover:before {
        opacity: 1;
      }
    }
  }
}
</style>
